<template>
	<image class="sl_image" :mode="mode" :src="imageUrl"></image>
</template>

<script>
	//图片组件，依赖阿里云对象存储
	//@group 全局组件
	export default {
		//
		name: 'sl_image',
		//
		props: {
			//图片地址或图片对象
			value: {
				type: String,
				default: ''
			},
			//图片裁剪、缩放的模式，参考uniapp的mode属性
			mode: {
				type: String,
				default: 'scaleToFill'
			},
		},
		//
		data() {
			return {
				material: {}
			};
		},
		//
		created() {
			if (this.value && this.value.startsWith('{') && this.value.endsWith('}')) {
				this.material = JSON.parse(this.value);
			}
		},
		//
		watch: {
			value(newValue) {
				if (newValue) {
					if (this.value && this.value.startsWith('{') && this.value.endsWith('}')) {
						this.material = JSON.parse(this.value);
					}
				}
			}
		},
		//
		computed: {
			imageUrl: function() {
				return this.material && this.material.id ? this.$settings.api + this.$settings.imageDirectory +
					this.material.id + '.jpg' : this.value;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.sl_image {
		position: absolute;
		width: 100%;
		height: 100%;
		max-width:100%;
		max-height:100%;
		top: 0;
		left: 0;
	}
</style>